<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-button type="primary" style="marginBottom:20px" @click="dialogVisible=true">新建角色</el-button>
      </el-row>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="title"
          label="角色名称"
          width="360"
        />
        <el-table-column
          prop="description"
          label="角色描述"
          width="360"
        />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button size="small" type="success" @click="assignPermit(row.id)">分配权限</el-button>
            <el-button size="small" type="primary" @click="editRole(row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="delRole(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 角色弹窗 -->
    <el-dialog
      :title="formData.id?'编辑角色':'新建角色'"
      :visible="dialogVisible"
      width="70%"
      @close="closeFn"
    >
      <el-form ref="form" label-width="110px" :model="formData" :rules="rules">
        <el-form-item label="角色名称" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="formData.description" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分配权限弹窗 -->
    <el-dialog
      title="分配角色权限"
      :visible="permitDialogVisible"
      width="70%"
      @close="permitDialogClose"
    >
      <el-tree
        ref="tree"
        :data="permitList"
        :props="{label:'title'}"
        default-expand-all
        node-key="id"
        show-checkbox
        :check-strictly="true"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="permitDialogClose">取 消</el-button>
        <el-button type="primary" @click="confirmPermit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, addRole, delRole, putRole, getRole } from '@/api/roles'
import { getPermissionList } from '@/api/permission'
export default {
  data() {
    return {
      tableData: [],
      limit: '50',
      start: '0',
      dialogVisible: false,
      formData: {
        title: '',
        description: ''
      },
      rules: {
        title: [
          { required: true, message: '角色名不能为空', trigger: 'blur' },
          { min: 2, max: 50, message: '角色名称长度2-50', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '角色描述不能为空', trigger: 'blur' },
          { min: 2, max: 50, message: '角色描述长度2-50', trigger: 'blur' }
        ]
      },
      permitDialogVisible: false,
      permitList: [], // 所有权限列表
      checkPermitList: [], // 选中的权限列表
      curRoleId: ''
    }
  },
  async created () {
    this.getRoleList()
    const res = await getPermissionList({
      limit: this.limit,
      offset: this.start
    })
    // console.log(res)
    this.permitList = this.list2TreeData(res, '0')
    // console.log(this.permitList, 155)
  },
  methods: {
    // 获取角色列表
    async getRoleList() {
      const res = await getRoleList({
        limit: this.limit,
        start: this.start
      })
      // console.log(res)
      this.tableData = res
    },
    // 关闭角色弹窗回调
    closeFn() {
      // 必须有这一步才能将id置空
      this.formData = {
        title: '',
        description: ''
      }
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },
    // 角色弹窗确定按钮回调
    async confirmFn() {
      await this.$refs.form.validate()// 表单验证
      if (this.formData.id) {
        await putRole(this.formData)// 编辑角色
      } else {
        await addRole(this.formData)// 新增角色
      }
      this.closeFn()// 关闭弹窗
      this.getRoleList()// 刷新
    },
    // 删除角色
    delRole(id) {
      this.$confirm('您确定删除该角色吗?', '删除', {
        type: 'warning'
      }).then(async() => {
        await delRole(id)
        this.getRoleList()
      }).catch(() => {})
    },
    // 编辑角色
    async editRole(id) {
      this.dialogVisible = true
      this.formData = await getRole(id)
    },
    // 分配权限按钮
    async assignPermit(id) {
      this.permitDialogVisible = true
      this.curRoleId = id// 保存当前角色id

      const res = await getRole(id)
      // console.log(168, res)
      this.checkPermitList = res.permissions.map(item => item.id)
      this.$refs.tree.setCheckedKeys(this.checkPermitList)// 设置目前勾选的节点
    },
    // 分配权限弹窗的确定按钮
    async confirmPermit() {
      const permissions = this.$refs.tree.getCheckedKeys()// 获取选中节点的key
      this.formData = await getRole(this.curRoleId)
      this.formData.permissions = permissions
      await putRole(this.formData)
      this.permitDialogClose()
    },
    // 列表转为树形结构
    list2TreeData(list, pid) {
      const arr = []
      list.forEach(item => {
        if (item.pid == pid) {
          arr.push(item)
          // console.log(arr, 184)
          item.children = this.list2TreeData(list, item.id)
        }
      })
      return arr
    },
    permitDialogClose() {
      this.permitDialogVisible = false
      this.$refs.tree.setCheckedKeys([])// 取消勾选
    }
  }
}
</script>

<style>

</style>
